<template>
  <div class="keshangpingce">
    <div class="kspctopposidiv">

      <div style="font-size: 0.8rem">搜索:&nbsp;&nbsp;</div>
      <div style="display: flex; align-items: center" class="kspcinputclass" id="searchinput">
        <div style="position: relative">
          <div style="display: flex; align-items: center" class="kspcinputshur">
            <el-input id="inputval" placeholder="请输入企业名称" v-model="qymcnamekspc" @keyup.enter.native="supplierList(1)"
              clearable>
            </el-input>

            <img src="../assets/loading.gif"
              style="height: 1.1rem; cursor: pointer; background: #182c56; border-radius: 10rem;" v-if="isLoading" />
            <img v-else src="../assets/searchpage.png" style="height: 1.1rem; cursor: pointer"
              @click="supplierList(1)" />
          </div>

          <div style="
                position: absolute;
                top: 1.8rem;
                left: 0.5rem;
                background-color: white;
                z-index: 9999;
                width: 20rem;
                padding: 0.1rem;
              " v-if="showkspc" v-clickoutside="handleClose">
            <ul v-if="kspclist.length > 0" class="container kspctopposidivsmall" ref="container" @scroll="handleScroll">
              <li v-for="(item, index) in kspclist" :key="index" class="kspctopposidivsmallli"
                @click="kspclistclickitem1(item.supplierId, item)" :title="item.supplierName">
                {{ index + 1 }}&nbsp;&nbsp;&nbsp;{{ item.supplierName }}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div v-if="false" style="display: flex; align-items: center; justify-content: end; padding-bottom: 1.8rem;"
        class="kspcinputclass" id="searchinput">
        <div style="position: relative">
          <div style="display: flex; align-items: center">
            <img src="../assets/searchpage.png" style="height: 30px; cursor: pointer; margin-right: 1rem;"
              @click="supplierList(1)" />

            <el-input id="inputval" size="mini" placeholder="请输入企业名称" v-model="qymcnamekspc"
              @keyup.enter.native="supplierList(1)" clearable>
            </el-input>
          </div>

          <div style="
                position: absolute;
                top: 30px;
                left: 45px;
                background-color: white;
                z-index: 9999;
                width: 172px;
                border: 1px solid #DCDFE6;
              " v-if="showkspc" v-clickoutside="handleClose">
            <ul v-if="kspclist.length > 0" class="container kspctopposidivsmall" ref="container" @scroll="handleScroll">
              <li v-for="(item, index) in kspclist" :key="index" class="kspctopposidivsmallli"
                @click="kspclistclickitem1(item.supplierId, item)" :title="item.supplierName">
                {{ index + 1 }}&nbsp;&nbsp;&nbsp;{{ item.supplierName }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 客商评测弹框 -->
    <div style="position: relative; height: 100%">
      <div class="mainContent">
        <div class="maindivcontent" style="height: 100%">
          <div class="viptopCon">
            <div class="viptopConList on_1">
              <!-- <img src="@/assets/imgs/icon_01.svg" /> -->
              <div class="viptopBox">
                <div class="txt1">{{ ljhzgys || 0 }}</div>
                <!-- <div class="txt2">累计合作供应商</div> -->
              </div>
            </div>
            <div class="viptopConList on_2">
              <!-- <img src="@/assets/imgs/icon_02.svg" /> -->
              <div class="viptopBox">
                <div class="txt1">{{ sqnum || 0 }}</div>
                <!-- <div class="txt2">本年入驻供应商</div> -->
              </div>
            </div>
            <div class="viptopConList on_3">
              <!-- <img src="@/assets/imgs/icon_03.svg" /> -->
              <div class="viptopBox">
                <div class="txt1">{{ hygysnum || 0 }}</div>
                <!-- <div class="txt2">会员供应商</div> -->
              </div>
            </div>
            <div class="viptopConList on_4">
              <!-- <img src="@/assets/imgs/icon_04.svg" /> -->
              <div class="viptopBox">
                <div class="txt1">{{ ndxzhynum || 0 }}</div>
                <!-- <div class="txt2">本年新增会员供应商</div> -->
              </div>
            </div>
          </div>
          <div style="height: 69%; display: flex; padding-top: 2rem;">
            <div style="width: 50%; height: 100%; position: relative">
              <div style="height: 90%; position: relative">
                <p style="height: 5%;">供应商状态</p>
                <Echart id="statusgys" ref="statusgys" :options="statuslistoption" height="95%" width="100%"
                  style="position: absolute; top: 5%; left: 0"></Echart>
              </div>
            </div>
            <div style="width: 50%; height: 100%; position: relative">
              <Echart id="kspctopleidatu" ref="kspctopleidatu" :options="kspctopleidatuopton" height="100%"
                width="100%"></Echart>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import Swiper from "swiper/bundle";
import Echart from "@/common/echart";
import * as echarts from "echarts";
import { yearDate, shangnianyearDate } from "@/utils/common";
export default {
  props: {},
  data() {
    return {
      // loading: true,
      // mySwiperhyjjwcgqk: "",
      // tableList: [],
      hygysnum: 0,
      ndxzhynum: 0,
      ljhzgys: 0,
      sqtotlje: 0,
      sqnum: 0,
      kspctopleidatuopton: {},
      statuslist: [],
      statuslistoption: {},

      showkspc: false,
      qymcnamekspc: '',
      kspclist: [],

      pageNum: 1,
      isLoading: false,
    };
  },
  watch: {},
  computed: {},
  components: { Echart },
  mounted() {
    // 获取列表数据
    this.getvipSupplierNum();
    this.getvipAnnualAdditionNum();
    this.getgetSupplierEvaluate();
    this.getgetmountainSupplier();
    this.gettotalBiddingAmount();
    this.getstateus(1);
    this.getstatusright(1);
  },
  methods: {

    handleClose() {
      this.showkspc = false;
    },
    handleScroll() {
      if (
        this.$refs.container.scrollTop +
        this.$refs.container.clientHeight +
        5 >=
        this.$refs.container.scrollHeight
      ) {
        if (this.timer !== null) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          // if (this.dataLoading) return;
          this.load();
        }, 300);
      }
    },
    load() {
      this.pageNum++;
      this.showkspc = true;

      this.supplierList();
    },

    supplierList(pageNum) {
      if (this.isLoading) {
        return;
      }
      pageNum && (this.pageNum = pageNum);
      let data = {
        pageNum: this.pageNum || 1,
        pageSize: 10,
        supplierName: this.qymcnamekspc,
      };
      if (this.pageNum == 1) {
        this.kspclist = [];
      }
      this.isLoading = true;
      APIS.Kspc.supplierList(data).then(res => {
        this.showkspc = true;
        this.isLoading = false;
        if (res.data?.items.length > 0) {
          this.kspclist = [...this.kspclist, ...res.data.items];
        } else {
          this.kspclist = [];
        }
      });
    },

    kspclistclickitem1(id, item) {
      this.$emit('kspTop', id);
      this.qymcnamekspc = item.supplierName;
      this.showkspc = false;
    },

    getstatusright(status) {
      // let kspcrightldtarr = {};
      // kspcrightldtarr = JSON.parse(localStorage.getItem("kspcrightldt"));
      // let renderarrx = [];
      // let values = [];
      // if (kspcrightldtarr != null) {
      //   if (kspcrightldtarr.temp > new Date().getTime()) {
      //     let max = Math.max.apply(
      //       Math,
      //       kspcrightldtarr.data.map((i) => {
      //         return i.num;
      //       })
      //     );

      //     kspcrightldtarr.data.map((item) => {
      //       let str = item.categoryname.match(/(\S*)供应商/)[1];
      //       if (
      //         window.devicePixelRatio == 1.5 ||
      //         window.devicePixelRatio == 1.25
      //       ) {
      //         renderarrx.push({
      //           name: str,
      //           max: max + 1000,
      //         });
      //       } else {
      //         renderarrx.push({
      //           name: str,
      //           max: max + 500,
      //         });
      //       }

      //       values.push(item.num);
      //     });
      //     this.renderkspctopleidatuopton(renderarrx, values, status);
      //   } else {
      //     this.getgetSupplierTypeNum(status);
      //   }
      // } else {
      this.getgetSupplierTypeNum(status);
      this.getgetSupplierTypeNum1();
      // }
    },
    getgetSupplierTypeNum(status) {
      let renderarrx = [];
      let values = [];
      APIS.Kspc.getSupplierTypeNum({}).then((res) => {
        res.data.sort((a, b) => b.num - a.num);
        res.data.map((item) => {
          // let str = item.categoryname.match(/(\S*)供应商/)[1];
          if (item.categoryname.indexOf('供应商') > -1) {
            let str = item.categoryname.replace(/供应商/, '');
            renderarrx.push({ name: str, max: res.data[0].num + 1500 });
            values.push(item.num);
          }
        });
        var chart = echarts.init(document.getElementById("kspctopleidatu"));
        this.renderkspctopleidatuopton(renderarrx, values, status);
      });
    },
    getstateus(status) {
      // let arr = {};
      // arr = JSON.parse(localStorage.getItem("statusarr"));
      // if (arr != null) {
      //   console.log(arr, "444");
      //   this.statuslist = arr.data;
      //   let xvalue = [];
      //   let yvalue = [];
      //   if (arr.temp > new Date().getTime()) {
      //     arr.data.map((item) => {
      //       xvalue.push(item.name);
      //       yvalue.push(item.num);
      //     });
      //     this.renderstatuslistoption(xvalue, yvalue, status);
      //   } else {
      //     this.getgetSupplierStateNum(status);
      //   }
      // } else {
      //   console.log(arr, "55555");
      this.getgetSupplierStateNum(status);
      this.getgetSupplierStateNum1();
      // }
    },
    format(percentage) {
      return `${percentage}`;
    },
    getgetSupplierStateNum(status) {
      this.statuslist = [];
      let statusarr = [];
      APIS.Kspc.getSupplierStateNum({}).then((res) => {
        res.data.map((item) => {
          if (item.applyname.includes("优质")) {
            statusarr.push({
              name: "优质分供商",
              num: item.num,
              sort: item.sort,
            });
          } else if (item.applyname.includes("核心")) {
            statusarr.push({
              name: "核心分供商",
              num: item.num,
              sort: item.sort,
            });
          } else if (item.applyname.includes("黑名单")) {
            statusarr.push({ name: "黑名单", num: item.num, sort: item.sort });
          } else if (item.applyname.includes("黄名单")) {
            statusarr.push({ name: "黄名单", num: item.num, sort: item.sort });
          } else if (item.applyname.includes("一般分供商")) {
            statusarr.push({
              name: "一般分供商",
              num: item.num,
              sort: item.sort,
            });
          }
        });

        statusarr.sort((a, b) => b.sort - a.sort);
        this.statuslist = statusarr;
        let xvalue = [];
        let yvalue = [];
        statusarr.map((item, i) => {
          xvalue.push(item.name);
          let color = '';
          if (i == 3) { color = '#2E3192' }
          if (i == 2) { color = '#009245' }
          if (i == 1) { color = '#662D91' }
          if (i == 0) { color = '#ED1C24' }
          yvalue.push({
            value: item.num,
            itemStyle: {
              color
            }
          });
        });
        this.renderstatuslistoption(xvalue, yvalue, status);
      });
    },
    renderstatuslistoption(xvalue, yvalue, status) {
      let itemStyle = {};
      let label = {};
      if (status) {
        itemStyle = { color: "#192C55" };
        label = {
          show: true, // 显示标签
          position: "right",
          fontSize: 16,
          color: "#192C55",
        };
      } else {
        itemStyle = { color: "#29ABE2" };
        label = {
          show: true, // 显示标签
          position: "right",
          fontSize: 16,
          color: "#29ABE2",
        };
      }
      let mychart = echarts.init(document.getElementById("statusgys"));
      let percentnum = "";
      if (window.devicePixelRatio == 1.5) {
        percentnum = "24%";
      } else if (window.devicePixelRatio == 1.25) {
        percentnum = "20%";
      } else {
        percentnum = "16%";
      }

      this.statuslistoption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: (params) => {
            return `${params[0].marker}${params[0].name}:${params[0].value}家`;
          },
        },
        grid: {
          left: percentnum,
          top: "10%",
          right: "6%",
          bottom: "10%",
        },
        xAxis: {
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          type: "category",
          data: xvalue.reverse(),
          triggerEvent: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              type: "dashed",
            },
          },
          axisTick: {
            show: true,
            length: 60,
            lineStyle: {
              type: "dashed",
              color: "#e0e6f1",
            },
          },
          axisLabel: {
            textStyle: {
              fontSize: 16,
              color: "black",
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "供应商状态",
            type: "bar",
            zlevel: 1,
            itemStyle: itemStyle,
            // label: label,
            barWidth: 36,
            data: yvalue.reverse(),
          },
        ],
      };
      mychart.off("click");
      mychart.on("click", (params) => {
        console.log(1231323312121, params);
        params.value = params.name;
        this.openlinknew(params);
      });
      window.addEventListener("resize", function () {
        mychart.resize();
      });
    },
    openlinknew(params) {
      if (params.value == "待审状态") {
        window.open(
          this.base_url + "/enterprise/sm/supplier/mainlib/main.html?applystatus=wait_approve&searchIsShow=0&_t=240254&_winid=w6340"
        );
      } else if (params.value == "备用状态") {
        window.open(
          this.base_url + "/enterprise/sm/supplier/mainlib/main.html?applystatus=prepare&searchIsShow=0&_t=638368&_winid=w6340"
        );
      } else if (params.value == "优质分供商") {
        if (process.env.NODE_ENV === 'test') {
          window.open(
            'http://10.0.12.119:32002/enterprise/sm/supplier/mainlib/main.html?applystatus=highquality&searchIsShow=0&_t=148521&_winid=w823'
          );
        } else {
          window.open(
            this.base_url + '/enterprise/sm/supplier/mainlib/main.html?applystatus=highquality&searchIsShow=0&_t=148521&_winid=w823'
          );

        }
      } else if (params.value == "核心分供商") {
        window.open(
          this.base_url + '/enterprise/sm/supplier/mainlib/main.html?applystatus=core&_t=825978&_winid=w823'
          // this.base_url+"/enterprise/sm/supplier/mainlib/main.html?applystatus=core&_t=702037&_winid=w6340"
        );
      } else if (params.value == "非生产经营类") {
        window.open(
          this.base_url + "/enterprise/sm/supplier/mainlib/main.html?applystatus=nonproductionoperation&_t=504154&_winid=w6340"
        );
      } else if (params.value == "黑名单") {
        window.open(
          this.base_url + '/enterprise/sm/supplier/mainlib/main.html?applystatus=9&searchIsShow=0&_t=261482&_winid=w823'
          // this.base_url+"/enterprise/sm/supplier/mainlib/main.html?applystatus=9&searchIsShow=0&_t=551252&_winid=w6340"
        );
      } else if (params.value == "黄名单") {
        window.open(
          this.base_url + "/enterprise/sm/supplier/mainlib/main.html?applystatus=yellow&searchIsShow=0&_t=957631&_winid=w6340"
        );
      } else if (params.value == "一般分供商") {
        window.open(
          this.base_url + '/enterprise/sm/supplier/mainlib/main.html?applystatus=yellow&searchIsShow=0&_t=644128&_winid=w823'
          // this.base_url+"/tabs?tabs=%E5%90%88%E6%A0%BC%E5%88%86%E4%BE%9B%E5%95%86%E5%BA%93,/enterprise/sm/supplier/sublibrary/main.html?supptype=all$searchIsShow=0"
        );
      }
    },
    renderkspctopleidatuopton(renderarrx, values, status) {
      let label = {};
      let areaStyle = {};
      if (status) {
        label = {
          show: true,
          paddingRight: 15,
          textStyle: {
            color: "#f7931e",
            fontSize: 12,
          },
          formatter: function (params) {
            return params.value;
          },
        };
        areaStyle = {
          normal: {
            color: "#f7931e",
            shadowBlur: 13,
            shadowColor: "rgba(0,0,0,.2)",
            shadowOffsetX: 0,
            shadowOffsetY: 10,
            opacity: 0.4,
          },
        };
      } else {
        label = {
          show: true,
          paddingRight: 15,
          textStyle: {
            color: "rgba(41, 171, 226, 1)",
            fontSize: 12,
          },
          formatter: function (params) {
            return params.value;
          },
        };
        areaStyle = {
          normal: {
            color: "rgba(41, 171, 226, 1)",
            shadowBlur: 13,
            shadowColor: "rgba(41, 171, 226, .2)",
            shadowOffsetX: 0,
            shadowOffsetY: 10,
            opacity: 0.4,
          },
        };
      }

      var chart = echarts.init(document.getElementById("kspctopleidatu"));

      this.kspctopleidatuopton = {
        tooltip: {
          confine: true,
          trigger: "item",
          formatter: function (params) {
            let divhtml = `<span style="font-size:16px;font-weight:800">${params.seriesName}</span><br/>`;
            renderarrx.map((item, index) => {
              divhtml += `<div style="display:flex;justify-content: space-between;">
                  <p>${item.name}</p>
                  <p">${values[index]}家</p></div>`;
            });
            return divhtml;
          },
        },
        radar: {
          triggerEvent: true,
          // shape: "circle",
          // splitArea: {
          //   areaStyle: {
          //     color: ["transparent"],
          //   },
          // },
          // axisLabel: {
          //   show: false,
          // },
          // axisLine: {
          //   show: true,
          //   lineStyle: {
          //     color: "lightgray",
          //     type: "dashed",
          //   },
          // },
          // // 环形的颜色
          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     color: [
          //       "#a3a7d1",
          //       "lightgray",
          //       "#lightgray",
          //       "#lightgray",
          //       "#lightgray",
          //     ],
          //   },
          // },
          // name: {
          //   textStyle: {
          //     color: "black",
          //     fontSize: 14,
          //     fontWeight: 600,
          //     lineHeight: 20,
          //   },
          // },
          indicator: renderarrx,
        },
        series: [
          {
            name: "标的类目下供应商数量分布",
            type: "radar",
            symbol: "circle",
            symbolSize: 0, //设置圆环内各个数据的圆点大小
            label: label,
            areaStyle: areaStyle,
            lineStyle: {
              normal: {
                type: "dashed",
                color: "red",
                width: 0,
              },
            },
            data: [values],
          },
        ],
      };
      chart.off("click");
      chart.on("click", function (params) {
        if (params.componentType === "radar") {
          if (params.name == "物资设备") {
            window.open(
              this.base_url + "/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001001&applystatus=all"
            );
          } else if (params.name == "劳务分包") {
            window.open(
              this.base_url + "/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001002&applystatus=all"
            );
          } else if (params.name == "公共服务") {
            window.open(
              this.base_url + "/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001005&applystatus=all"
            );
          } else if (params.name == "专业分包") {
            window.open(
              this.base_url + "/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001004&applystatus=all"
            );
          } else if (params.name == "机械租赁") {
            window.open(
              this.base_url + "/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001003&applystatus=all"
            );
          } else if (params.name == "非生产经营类") {
            window.open(
              this.base_url + "/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001006&applystatus=all"
            );
          }
        }
      });
      window.addEventListener("resize", function () {
        chart.resize();
      });
    },
    returnFloat(num) {
      num = (parseInt(num * 100) / 100).toFixed(2);
      return num;
    },
    //山区二十六县供应商数量
    getgetmountainSupplier() {
      APIS.Kspc.mountainSupplier().then((res) => {
        this.sqnum = res.data;
      });
    },
    //山区二十六县中标总金额
    gettotalBiddingAmount() {
      APIS.Kspc.totalBiddingAmount().then((res) => {
        // this.sqtotlje = (res.data.totalprice / 100000000).toFixed(2);
        this.sqtotlje = this.returnFloat(res.data.totalprice / 100000000);
      });
    },
    getgetSupplierEvaluate() {
      APIS.Kspc.getSupplierEvaluate().then((res) => {
        this.ljhzgys = res.data.total;
      });
    },
    getvipAnnualAdditionNum() {
      APIS.Kspc.vipAnnualAdditionNum().then((res) => {
        this.ndxzhynum = res.data;
      });
    },
    getvipSupplierNum() {
      APIS.Kspc.vipSupplierNum().then((res) => {
        this.hygysnum = res.data;
      });
    },
    getgetSupplierStateNum1() {
      let statusarr = [];
      APIS.Kspc.getSupplierStateNum({}).then((res) => {
        res.data.map((item) => {
          if (item.applyname.includes("优质")) {
            statusarr.push({
              name: "优质分供商",
              num: item.num,
              sort: item.sort,
            });
          } else if (item.applyname.includes("核心")) {
            statusarr.push({
              name: "核心分供商",
              num: item.num,
              sort: item.sort,
            });
          } else if (item.applyname.includes("黑名单")) {
            statusarr.push({ name: "黑名单", num: item.num, sort: item.sort });
          } else if (item.applyname.includes("黄名单")) {
            statusarr.push({ name: "黄名单", num: item.num, sort: item.sort });
          } else if (item.applyname.includes("一般分供商")) {
            statusarr.push({
              name: "一般分供商",
              num: item.num,
              sort: item.sort,
            });
          }
        });
        statusarr.sort((a, b) => b.sort - a.sort);
        const t2 = new Date().getTime() + 10800000;
        let kspcleftobj = { data: statusarr, temp: t2 };
        localStorage.setItem("statusarr", JSON.stringify(kspcleftobj));
      });
    },
    getgetSupplierTypeNum1() {
      let renderarrx = [];
      let values = [];
      APIS.Kspc.getSupplierTypeNum({}).then((res) => {
        res.data.sort((a, b) => b.num - a.num);
        const t = new Date().getTime() + 10800000;
        let kspcrightldtobj = { data: res.data, temp: t };
        localStorage.setItem("kspcrightldt", JSON.stringify(kspcrightldtobj));
        // res.data.map((item) => {
        //   let str = item.categoryname.match(/(\S*)供应商/)[1];
        //   renderarrx.push({ name: str, max: res.data[0].num + 1500 });
        //   values.push(item.num);
        // });
      });
    },
  },
};
</script>
// 这种引入确保样式只在该组件生效
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss">
.keshangpingce {
  width: 98%;
  height: 95%;
  font-size: 1rem;
  margin: 0 auto;
  position: relative;
  padding-top: 3rem;

  .viptopCon {
    display: flex;
    justify-content: space-between;

    .viptopConList {
      display: flex;
      // align-items: center;
      width: 25%;
      height: 5rem;

      &.on_1 {
        background: url('@/assets/imgs/icon_01.svg') no-repeat;
        background-size: contain;
      }

      &.on_2 {
        background: url('@/assets/imgs/icon_02.svg') no-repeat;
        background-size: contain;
      }

      &.on_3 {
        background: url('@/assets/imgs/icon_03.svg') no-repeat;
        background-size: contain;
      }

      &.on_4 {
        background: url('@/assets/imgs/icon_04.svg') no-repeat;
        background-size: contain;
      }

      img {
        width: 6rem;
      }

      .viptopBox {
        text-align: center;
        width: 100%;
        padding: 0 0.8rem;
        padding-top: 0.5rem;

        .txt1 {
          font-size: 1.98rem;
          color: #E95513;
          /* border-bottom: 1px solid #192C55;
                    padding-bottom: 0.5rem; */
        }

        .txt2 {
          padding-top: 0.5rem;
          font-size: 1.356rem;
          color: #192C55;
        }
      }
    }
  }

  .kspctopposidiv {
    height: 1.2rem;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0.8rem;
    right: 0.5rem;

    .el-popover__reference-wrapper {
      display: flex;
    }

    .kspcinputclass {
      border-radius: 2rem;
      height: 1.2rem;
      border: 1px solid;
      padding: 0.1rem;

      // zoom: 0.5;
      .el-input__inner {
        width: 20rem;
        height: 100%;
        line-height: 1.2rem;
        border-radius: 2rem;
        background-color: transparent;
        border: none;
      }

      .el-input {
        font-size: 0.7rem;
      }

      .el-input__suffix {
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
  }

}

.kspctopposidivsmall {
  box-sizing: border-box;
  height: 12rem;
  overflow: auto;
}

.kspctopposidivsmallli {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  font-size: 0.7rem;
  cursor: pointer;
  font-size: .8rem;
  padding: .2rem;
}

.textchuli {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.row-item {
  color: #192c55;
}

.row-item:nth-child(2) {
  background-image: linear-gradient(181deg, #fdbe45 6%, #c63228);
  color: transparent;
  -webkit-background-clip: text;
}

.el-progress-bar__outer {
  height: 14px !important;
  border-radius: 0;
}
</style>